'use client';

// Debounce
import { useDebounce } from 'use-debounce';

// RHF
import { useFormContext } from 'react-hook-form';

// Components
// import { FinalPdf, LivePreview } from '@/app/components';

// Contexts
import { useInvoiceContext } from '@/context/InvoiceContext';

// Types
import { InvoiceType } from '@/types';

import LivePreview from './LivePreview';
import { FinalPdf } from './FinalPdf';

export const PdfViewer = () => {
    const { invoicePdf } = useInvoiceContext();

    const { watch } = useFormContext<InvoiceType>();

    const [debouncedWatch] = useDebounce(watch, 1000);

    const formValues = debouncedWatch();

    return <div className="my-3">{invoicePdf.size === 0 ? <LivePreview data={formValues} /> : <FinalPdf />}</div>;
};
